import React, { Component } from "react";
import { RACE_AREA_LINK } from "../actions/types.js"
import { NavLink } from "react-router-dom";
import RaceAreaVideoList from "./RaceAreaVideoList.js"
import axios from "axios";
class RaceArea extends Component {
  state = {siteName:[]}
  componentDidMount(){
    axios.get("/Tgh/data/site_data").then(res => {
      this.setState({siteName:res.data.data});
    });
  }
  render() {
    const { area } = this.props.match.params;
    return (
      <div>
        <div className="top-title"><i className="fa fa-angle-left back" onClick={()=>this.props.history.go(-1)}/>详情</div>
        <div className="race-area-nav">
          {this.renderNav()}
        </div>
        <RaceAreaVideoList area={area}/>
      </div>
    );
  }
  renderNav(){
    if(this.state.siteName.length !==0){
      return this.state.siteName.map(site=>{
        const { id, site_name } = site;
        return(
          <NavLink to={`${RACE_AREA_LINK}/${site_name}`} key={id} activeClassName="active">
            <span>{site_name}</span>
          </NavLink>
        )
      })
    }
  }
}
export default RaceArea;
